<template>
    <div>
        <h1>{{ title }}</h1>
        <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="根据分类查看" name="1">
                <el-table
                        :data="saleCategoryData"
                        show-summary
                        style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="分类名">
                    </el-table-column>
                    <el-table-column
                            prop="count"
                            label="销售量"
                            sortable>
                    </el-table-column>
                    <el-table-column
                            prop="totalPrice"
                            label="总售价"
                            sortable>
                    </el-table-column>
                </el-table>
            </el-collapse-item>
            <el-collapse-item title="根据菜品来看" name="2">
                <el-table
                        :data="saleMenuData"
                        show-summary
                        style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="菜品名">
                    </el-table-column>
                    <el-table-column
                            sortable
                            prop="count"
                            label="销售量">
                    </el-table-column>
                    <el-table-column
                            sortable
                            prop="price"
                            label="销售价">
                    </el-table-column>
                    <el-table-column
                            sortable
                            prop="totlePrice"
                            label="总售价">
                        <template slot-scope="scope">
                            {{totleSum(scope.row)}}
                        </template>
                    </el-table-column>
                </el-table>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
  export default {
    name: 'Sale',
    data () {
      return {
        title: '销售数据',
        activeName: '1',
        saleCategoryData: [
          {
            name: '主食',
            count: '20',
            totalPrice: '300'
          },
          {
            name: '西餐',
            count: '30',
            totalPrice: '600'
          },
          {
            name: '饮品',
            count: '20',
            totalPrice: '300'
          },
          {
            name: '中餐',
            count: '60',
            totalPrice: '1200'
          },
          {
            name: '热菜',
            count: '20',
            totalPrice: '500'
          },
          {
            name: '凉菜',
            count: '20',
            totalPrice: '400'
          }
        ],
        saleMenuData: [
          {
            name: '米饭',
            count: '20',
            price: '2'
          },
          {
            name: '牛排',
            count: '5',
            price: '60'
          },
          {
            name: '意大利面',
            count: '10',
            price: '26'
          },
          {
            name: '沙拉',
            count: '20',
            price: '25'
          },
          {
            name: '奶茶',
            count: '40',
            price: '15'
          },
          {
            name: '青菜',
            count: '15',
            price: '18'
          },
          {
            name: '红烧鱼',
            count: '15',
            price: '25'
          },
          {
            name: '炒米粉',
            count: '40',
            price: '15'
          }
        ]
      }
    },
    methods: {
      totleSum (data) {
        return data.count * data.price
      }
    }
  }
</script>

<style>

</style>
